<template>
	<view class="recruit">
		<!-- 导航 -->
		<u-navbar back-text="团长招募" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- end -->
		<view style="width: 100%;" v-show="showDemo">
			<!-- 头部开始 -->
			<view style="width: 100%;position: relative;">
				<image style="width: 100%;" src="https://beedao.oss-cn-beijing.aliyuncs.com/caf071423bb24c57a17cb8f2cd6d7a6c.png" mode="widthFix"></image>
				<view style="width: 160rpx; position: absolute;top: 30rpx;right: -22rpx;">
					<view class="boxs">
						<image style="width: 160rpx;" src="https://beedao.oss-cn-beijing.aliyuncs.com/e13445e0c5b74f349f0385d91272e40e.png" mode="widthFix"></image>
						<button open-type="share" class="getCodeView"></button>
					</view>
				</view>
			</view>
			<!-- 头部开始结束 -->
			<!-- 团长信息栏 -->
			<view style="width: 100%;background-color:#FF9624 ;height: 1800rpx;margin-top: -8rpx;position: relative;">
				<view style="position: absolute;top: -200rpx;width: 100%;min-height: 600rpx;">
					<view
						style="width: 92%;margin: 0 auto;background-image: url(https://beedao.oss-cn-beijing.aliyuncs.com/d45ce4cc8af94c90bc09127810d30e4f.png);background-size: 100% 100%;background-repeat: no-repeat;"
					>
						<view style="display: flex;padding: 30rpx 0;line-height: 40rpx;justify-content:center;">
							<image
								style="width: 50rpx;margin-right: 30rpx;margin-top: 7rpx;"
								src="https://beedao.oss-cn-beijing.aliyuncs.com/73206367cac64bc893732558f3686ae0.png"
								mode="widthFix"
							></image>
							<view style="font-size: 30rpx;font-weight: bold;">立即成为团长</view>
							<image
								style="width: 50rpx;margin-left: 30rpx;margin-top: 8rpx;"
								src="https://beedao.oss-cn-beijing.aliyuncs.com/4cf6bc5508274d5598717ae051f0a572.png"
								mode="widthFix"
							></image>
						</view>
						<view style="width: 92%;margin: 0 auto;">
							<view style="display: flex;width: 100%;margin-bottom: 16rpx;">
								<view style="font-size: 30rpx;font-weight: bold;width: 24%;line-height: 68rpx;">所在城市</view>
								<!-- <view style=""> -->
								<view
									@click="is_show()"
									style="justify-content: space-between; width: 75%;display: flex;align-items: center;font-size: 26rpx;border: 1rpx solid #E9E9E9;border-radius: 8rpx;color: #B6B6B6;padding: 6rpx 20rpx;line-height: 60rpx;"
								>
									<view :style="{ color: form.city ? '#000000' : '#B6B6B6' }" style="text-align: right;">{{ form.city ? form.city : '请选择所在地区' }}</view>
									<image style="width: 14rpx;height: 24rpx;margin-left: 25rpx;" src="../../static/icon/jian.png" mode=""></image>
								</view>
								<!-- <input placeholder="请选择所在地区" placeholder-style="line-height: 60rpx;font-size: 26rpx;" style="" type="text" v-model="form.city" /> -->
								<!-- </view> -->
							</view>
							<u-select
								style="line-height: 32rpx;width: 4%;"
								title="选择所在地区"
								v-model="showCity"
								child-name="childrenList"
								value-name="id"
								label-name="districtName"
								mode="mutil-column-auto"
								:list="listCity"
								confirm-color="#FCC800"
								@confirm="confirm"
							></u-select>
							<view style="display: flex;width: 100%;margin-bottom: 16rpx;">
								<view style="font-size: 30rpx;font-weight: bold;width: 24%;line-height: 68rpx;">社区名称</view>
								<view style="width: 68%;">
									<input
										maxlength="20"
										placeholder="请输入社区名称"
										placeholder-style="line-height: 60rpx;font-size: 26rpx;color:#B6B6B6;"
										style="font-size: 26rpx;border: 1rpx solid #E9E9E9;border-radius: 8rpx;width: 100%;color: #000000;padding: 12rpx 20rpx;line-height: 60rpx;"
										type="text"
										v-model="form.name"
									/>
								</view>
							</view>
							<view style="display: flex;width: 100%;margin-bottom: 16rpx;">
								<view style="font-size: 30rpx;font-weight: bold;width: 24%;line-height: 68rpx;">联系电话</view>
								<view style="width: 68%;">
									<input
										maxlength="11"
										placeholder="请输入联系电话"
										placeholder-style="line-height: 60rpx;font-size: 26rpx;color:#B6B6B6;"
										style="font-size: 26rpx;border: 1rpx solid #E9E9E9;border-radius: 8rpx;width: 100%;color: #000000;padding: 12rpx 20rpx;line-height: 60rpx;"
										type="number"
										v-model="form.phone"
									/>
								</view>
							</view>
							<view style="display: flex;width: 100%;margin-bottom:24rpx;">
								<view style="font-size: 30rpx;font-weight: bold;width: 24%;line-height: 68rpx;">验证码</view>
								<view style="width: 50%;">
									<input
										maxlength="6"
										type="number"
										placeholder="请输入验证码"
										placeholder-style="line-height: 60rpx;font-size: 26rpx;color:#B6B6B6;"
										style="font-size: 26rpx;border: 1rpx solid #E9E9E9;border-radius: 8rpx;width: 80%;color: #000000;padding: 12rpx 20rpx;line-height: 60rpx;"
										v-model="form.code"
									/>
								</view>
								<view
									@click="!disabled ? sendcode(form.phone) : ''"
									style="border-radius: 8rpx;text-align: center;font-size: 26rpx;display: flex;justify-content: center;align-items: center;background-color: #E9E9E9;color: #B6B6B6;width: 156rpx;"
								>
									{{ userinfo.btntxt }}
								</view>
							</view>
						</view>
						<!-- 提交按钮 -->
						<view
							@click="applyMade"
							style="padding: 24rpx 0;width: 94%;margin: 0 auto;background: linear-gradient(146deg, #FF7003 0%, #FFA400 100%);font-size: 34rpx;text-align: center;border-radius: 50rpx;color: #fff;"
						>
							立即报名成为团长
						</view>
						<view style="height: 40rpx;width: 100%;"></view>
						<!-- 提交按钮结束 -->
					</view>
					<!-- 团长好处 -->
					<view style="min-height: 800rpx; width: 92%;margin: 0 auto;margin-top: 50rpx;">
						<view
							style="min-height: 600rpx; background-image: url(https://beedao.oss-cn-beijing.aliyuncs.com/d45ce4cc8af94c90bc09127810d30e4f.png);background-size: 100% 100%;background-repeat: no-repeat;"
						>
							<view style="display: flex;padding: 50rpx 0 30rpx 0;line-height: 40rpx;justify-content:center;">
								<image
									style="width: 50rpx;margin-right: 30rpx;margin-top: 7rpx;"
									src="https://beedao.oss-cn-beijing.aliyuncs.com/73206367cac64bc893732558f3686ae0.png"
									mode="widthFix"
								></image>
								<view style="font-size: 30rpx;font-weight: bold;">为什么成为必到团长？</view>
								<image
									style="width: 50rpx;margin-left: 30rpx;margin-top: 8rpx;"
									src="https://beedao.oss-cn-beijing.aliyuncs.com/4cf6bc5508274d5598717ae051f0a572.png"
									mode="widthFix"
								></image>
							</view>
							<view
								style="width: 92%;margin: 0 auto; display: flex;justify-content: center; height: 84rpx;width: 100%; background-image: url(https://beedao.oss-cn-beijing.aliyuncs.com/6eb43f05556b4a48a9ee1219b901773c.png);background-size: 100% 100%;background-repeat: no-repeat;"
							>
								<view
									style="padding: 14rpx 20rpx;background-color: #fff;border-radius:32rpx;color: #FF7900;display: inline-block;line-height: 28rpx; height: 57rpx;margin-top: 14rpx;"
								>
									利好事件
								</view>
								<view style="margin-left: 12rpx;color: #fff;line-height: 84rpx;">助推商家发展，专注家庭服务</view>
							</view>
							<view style="width: 84%;margin: 0 auto;display: flex; padding: 30rpx 0rpx 0rpx 0rpx;  flex-wrap: wrap;">
								<view style="display: flex;justify-content: center;width: 50%;margin-bottom: 16rpx;" v-for="(item, index) in list" :key="index">
									<view style="position: relative;">
										<image style="width: 80rpx;" src="https://beedao.oss-cn-beijing.aliyuncs.com/91ef0139a0bf46efbfe8ea766e01510b.png" mode="widthFix"></image>
										<view style="width: 70rpx;text-align: center;position: absolute;top: 16rpx;font-size: 24rpx;color: #fff;left: 0;">{{ item.inde }}</view>
									</view>
									<view style="margin-left: 8rpx;border-bottom: 5rpx solid #FFD8A2;line-height: 56rpx;height: 52rpx;font-size: 30rpx;">{{ item.title }}</view>
								</view>
							</view>
							<view
								style="height: 60rpx;line-height: 60rpx; width:70%;margin: 0 auto;background: linear-gradient(146deg, #FF6F02 0%, #FFA200 100%);font-size: 32rpx;text-align: center;border-radius: 50rpx;color: #fff;"
							>
								作为团长你需要
							</view>
						</view>
						<view style="background-color: #fff;width: 100%;margin-top: -14rpx;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;">
							<view style="width: 70%;margin: 0 auto;margin-bottom: 30rpx;">
								<view style="display: flex;justify-content: flex-start;padding-top: 20rpx;">
									<view
										style="position: relative; border-radius: 36rpx; width: 60rpx;height: 60rpx;text-align: center;line-height: 56rpx;background-color: #FFA93C;border: 1rpx solid #FFA93C;color: #fff;font-size: 28rpx;padding-left: 4rpx;"
									>
										01
										<view style="width: 1rpx;height: 36rpx;background-color: #FFA93C;position: absolute;top: 64rpx;left: 29rpx;"></view>
									</view>
									<view style="line-height: 60rpx;margin-left: 16rpx;letter-spacing: 2rpx;font-size: 29rpx;">告诉客户您正在做这件事</view>
								</view>
								<view style="display: flex;justify-content: flex-start;padding-top: 46rpx;">
									<view
										style="position: relative; border-radius: 36rpx; width: 60rpx;height: 60rpx;text-align: center;line-height: 56rpx;background-color: #FFA93C;border: 1rpx solid #FFA93C;color: #fff;font-size: 28rpx;padding-left: 4rpx;"
									>
										02
										<view style="width: 1rpx;height: 36rpx;background-color: #FFA93C;position: absolute;top: 64rpx;left: 29rpx;"></view>
									</view>
									<view style="line-height: 60rpx;margin-left: 16rpx;letter-spacing: 2rpx;font-size: 29rpx;">把最优惠的服务推荐给客户</view>
								</view>
								<view style="display: flex;justify-content: flex-start;padding-top: 46rpx;">
									<view
										style="position: relative; border-radius: 36rpx; width: 60rpx;height: 60rpx;text-align: center;line-height: 56rpx;background-color: #FFA93C;border: 1rpx solid #FFA93C;color: #fff;font-size: 28rpx;padding-left: 4rpx;"
									>
										03
										<view style="width: 1rpx;height: 36rpx;background-color: #FFA93C;position: absolute;top: 64rpx;left: 29rpx;"></view>
									</view>
									<view style="line-height: 60rpx;margin-left: 16rpx;letter-spacing: 2rpx;font-size: 29rpx;">通过微信群将小程序传播出去</view>
								</view>
								<view style="display: flex;justify-content: flex-start;padding-top: 46rpx;">
									<view
										style="position: relative; border-radius: 36rpx; width: 60rpx;height: 60rpx;text-align: center;line-height: 56rpx;background-color: #FFA93C;border: 1rpx solid #FFA93C;color: #fff;font-size: 28rpx;padding-left: 4rpx;"
									>
										04
									</view>
									<view style="line-height: 60rpx;margin-left: 16rpx;letter-spacing: 2rpx;font-size: 29rpx;">引导客户下单</view>
								</view>
							</view>
							<view
								style="margin-top: 30rpx; height: 60rpx;line-height: 60rpx; width:70%;margin: 0 auto;background: linear-gradient(146deg, #FF6F02 0%, #FFA200 100%);font-size: 32rpx;text-align: center;border-radius: 50rpx;color: #fff;"
							>
								我们对你的要求
							</view>
							<view style="width:70%;margin: 0 auto;padding-bottom: 30rpx;margin-top: 30rpx;">
								<view style="line-height: 46rpx;height: 46rpx;margin-bottom: 20rpx;">
									<text style="border-bottom: 4rpx solid #FFD8A2;">1：在社区或社区附近拥有自己的门店</text>
								</view>
								<view style="line-height: 46rpx;height: 46rpx;margin-bottom: 20rpx;">
									<text style="border-bottom: 4rpx solid #FFD8A2;">2：拥有自己的客户微信群</text>
								</view>
								<view style="line-height: 46rpx;height: 46rpx;margin-bottom: 20rpx;">
									<text style="border-bottom: 4rpx solid #FFD8A2;">3：在社区中有一定影响力</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 团长好处结束 -->
				</view>
			</view>
			<!-- 团长信息栏结束 -->
			<!-- 模态框 -->
			<u-modal v-model="showModelMask" confirm-color="#FF7900" :content="content"></u-modal>
			<!-- 模态框结束 -->
			<!-- 提交成功失败的弹框 -->
			<u-mask :show="show">
				<view style="display: flex;align-items: center;justify-content: center;height: 100%;">
					<view style="width:68%;margin: 0 auto;background-color: #fff;padding-bottom: 28rpx;border-radius: 20rpx;">
						<view style="width: 200rpx;margin:  0 auto; margin-top: 30rpx;">
							<image style="width: 200rpx;" :src="isSuccess ? resForm.suImg : resForm.errImg" mode="widthFix"></image>
						</view>
						<view v-if="resForm.isSuccess" style="margin-bottom: 20rpx;">
							<view style="line-height: 80rpx;font-size: 30rpx;width: 100%;text-align: center;font-weight: 400;">报名成功</view>
							<view style="width: 80%;margin: 0 auto; font-size:27rpx;font-weight: 400;">您已经提交过申请，请等待工作人员的联系</view>
						</view>
						<view v-else>
							<view style="line-height: 80rpx;font-size: 30rpx;width: 100%;text-align: center;font-weight: 400;">报名失败</view>
							<view style="width: 80%;margin: 0 auto; font-size:27rpx;font-weight: 400;">您已经提交过申请，请等待工作人员的联系</view>
						</view>
						<view
							@click="show = false"
							style="margin-top: 30rpx; height: 60rpx;line-height: 60rpx; width:35%;margin: 0 auto;background: linear-gradient(146deg, #FF7003 0%, #FFA400 100%);font-size: 32rpx;text-align: center;border-radius: 50rpx;color: #fff;"
						>
							好的
						</view>
					</view>
				</view>
			</u-mask>
			<!-- 提交成功失败的弹框结束 -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showDemo:true,
			showModelMask: false, //模态框内容
			content: '', //模态框文本
			showCity: false, //选地区
			disabled: false, //是否允许发送验证码
			userinfo: {
				time: 0,
				btntxt: '获取验证码'
			},
			show: false, //提交成功弹框
			resForm: {
				isSuccess: true,
				suImg: 'https://beedao.oss-cn-beijing.aliyuncs.com/0fe6bb488301458fbab99b90a5d43a49.png',
				errImg: 'https://beedao.oss-cn-beijing.aliyuncs.com/7acb1cc82eb5401aab8152bd99710e63.png'
			}, //提交成功失败展示图
			background: {
				backgroundColor: '#fca800'
			},
			listCity: [],
			form: {
				city: '',
				name: '',
				phone: '',
				code: ''
			}, //提交参数
			list: [
				{ title: '丰厚提成', inde: '01' },
				{ title: '海量订单', inde: '02' },
				{ title: '售后无忧', inde: '03' },
				{ title: '平台保障', inde: '04' },
				{ title: '礼品加持', inde: '05' }
			]
		};
	},
	onLoad() {
		var that=this;
		// 获取城市
		that.getCityList();
		setTimeout(()=>{
			that.showDemo=true;
		},500)
		
	},
	onShow() {},
	methods: {
		onShareAppMessage(res) {
			var userInfo = JSON.parse(uni.getStorageSync('userinfo'));
			this.userId = userInfo.userId;
			if (res.from === 'button') {
				// 来自页面内分享按钮
			}
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'common/insertShareLog'
			};
			let data = {};
			this.http.httpTokenRequest(opts, data).then(res => {
				//分享日志，不需要处理
			});
			return {
				title: '必到家政',
				path:'/pages/login/login?id='+this.userId+"&jumpType="+9,
			};
		},
		// 获取城市
		getCityList() {
			var _this = this;
			let opts = {
				way: true,
				method: 'post',
				url: 'chiefRecruit/cityList'
			};
			let data = _this.form;
			_this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == 200) {
					this.listCity = res.data;
				} else {
					uni.showToast({
						title: res.message,
						mask: true,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		// 报名申请操作
		applyMade() {
			if (this.form.city == '') {
				this.content = '请先选择所在地区';
				this.showModelMask = true;
				return false;
			} else if (this.form.name == '') {
				this.content = '请输入社区名称';
				this.showModelMask = true;
				return false;
			} else if (this.form.phone == '') {
				this.content = '请输入手机号';
				this.showModelMask = true;
				return false;
			} else if (this.form.code == '') {
				this.content = '请输入验证码';
				this.showModelMask = true;
				return false;
			} else {
				let opts = {
					way: true,
					method: 'post',
					url: 'chiefRecruit/saveChiefAudit'
				};
				let data = {
					chiefCity: this.form.city,
					communityName: this.form.name,
					code: this.form.code,
					chiefPhone: this.form.phone
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == '000000') {
						this.resForm.isSuccess = true;
						this.show = true;
						this.form = {
							city: '',
							name: '',
							phone: '',
							code: ''
						};
					} else if(res.code == "1020"){
						this.resForm.isSuccess = false;
						this.show = true;
						this.form = {
							city: '',
							name: '',
							phone: '',
							code: ''
						};
					}else{
						uni.showToast({
							title: res.message,
							mask: true,
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		},
		//点击确定的值
		confirm(e) {
			this.form.city = e[1].label;
			this.showCity = false;
		},
		// 点击选择地区
		is_show() {
			this.showCity = true;
		},
		//手机验证发送验证码
		sendcode(phone) {
			var that = this;
			const reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
			if (phone == '') {
				that.content = '手机号不能为空';
				that.showModelMask = true;
				return false;
			} else {
				let opts = {
					way: true,
					method: 'post',
					url: 'common/send/code'
				};
				let data = {
					phoneNo: phone
				};
				that.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '发送成功',
							mask: true,
							icon: 'none',
							duration: 1000
						});
						that.userinfo.time = 60;
						that.disabled = true;
						that.getMsgCode();
					} else {
						uni.showToast({
							title: res.message,
							mask: true,
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		},
		//60S倒计时
		getMsgCode() {
			if (this.userinfo.time > 0) {
				this.userinfo.time--;
				this.userinfo.btntxt = this.userinfo.time + 's';
				setTimeout(this.getMsgCode, 1000);
			} else {
				this.userinfo.time = 0;
				this.userinfo.btntxt = '获取验证码';
				this.disabled = false;
			}
		}
	}
};
</script>

<style scoped lang="scss">
.recruit {
	padding: 0;
	margin: 0;
	width: 100%;
	overflow: hidden;
}
.boxs {
	text-align: center;
	width: 160rpx;
	height: 36rpx;
	display: inline-block;
	position: relative;
}
.getCodeView {
	display: inline-block !important;
	padding: 0 !important;
	width: 160rpx !important;
	margin-right: 0;
	height: 100rpx;
	line-height: 100rpx;
	padding-right: 0rpx;
	z-index: 11;
	opacity: 0;
	position: absolute;
	left: 0;
}
</style>
